<template>
  <Head title="关联电桩" isBack>
    <template #content>
      <Table
        ref="tableRef"
        :url="URL_PAGINGQUERYPLATFORMAREAID"
        :columns="data.columns"
        :toolbar="data.toolbar"
        :query="data.query"
        :params="{ platformAreaId: id }"
      ></Table>
    </template>
  </Head>
</template>

<script lang="ts" setup>
import Head from '@/components/head/index.vue';
import Table from '@/components/table/index.vue';
import { queryDicByParent } from '@/service/apis/api';
import {
  URL_PAGINGQUERYPLATFORMAREAID,
  EXPORT_PAGINGQUERYPLATFORMAREAID,
} from '@/service/apis/pile';
import { exportFile } from '@/utils/utils';
import { ONLINE } from '@/utils/dictionaries';

const route = useRoute();
const {
  query: { id },
} = route;

const tableRef = ref();

const data = reactive({
  columns: [
    {
      prop: 'operatorName',
      label: '归属运营商',
    },
    {
      prop: 'stationName',
      label: '归属电站',
    },
    {
      prop: 'equipmentName',
      label: '电桩名称',
    },
    {
      prop: 'equipmentModelType',
      label: '电桩类型',
      dic: [] as any,
      type: Number,
    },
    {
      prop: 'equipmentCode',
      label: '电桩编号',
    },
    {
      prop: 'supportCapacityControl',
      label: '是否支持功率调节',
      dic: [] as any,
    },
    {
      prop: 'capacityControlMax',
      label: '功率调节上限（kW）',
    },
    {
      prop: 'capacityControlMin',
      label: '功率调节下限（kW）',
    },
    {
      prop: 'isOnline',
      label: '在线状态',
      dic: ONLINE,
    },
    {
      prop: 'relevanceTime',
      label: '关联时间',
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'courtsList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(
          EXPORT_PAGINGQUERYPLATFORMAREAID,
          '关联电桩列表',
          tableRef.value?.getForm()
        );
      },
    },
  ],
  query: [
    {
      label: '电桩编码',
      prop: 'equipmentCode',
      comName: 'input',
      props: {
        placeholder: '请输入电桩编码',
      },
    },
    {
      label: '电桩类型',
      prop: 'type',
      comName: 'select',
      props: {
        placeholder: '请选择电桩类型',
        options: [] as any,
      },
    },
    {
      label: '在线状态',
      prop: 'isOnline',
      comName: 'select',
      props: {
        placeholder: '请选择在线状态',
        options: ONLINE,
      },
    },
    {
      label: '归属电站',
      prop: 'stationName',
      comName: 'input',
      props: {
        placeholder: '请输入归属电站',
      },
    },
    {
      label: '关联时间',
      prop: 'date',
      comName: 'date',
      keys: ['startTime', 'endTime'],
      props: {
        type: 'daterange',
      },
    },
    {
      label: '支持功率调节',
      prop: 'supportCapacityControl',
      comName: 'select',
      props: {
        placeholder: '请选择支持功率调节',
        options: [] as any,
      },
    },
  ],
});
queryDicByParent({ listDtos: ['equipmentModelType', 'trueOrFalse'] }).then(
  (res: any) => {
    data.columns[3].dic = [...res.equipmentModelType];
    data.columns[5].dic = [...res.trueOrFalse];
    data.query[1].props.options = [...res.equipmentModelType];
    // data.query[2].props.options = [...res.trueOrFalse];
    data.query[5].props.options = [...res.trueOrFalse];
  }
);
</script>